<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登陆</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        body {
            background: url(../imgs/login_bg.png) no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
        }
        .app-title{
            width: 78.64583333%;
            height: auto;
            display: block;
            margin: 0 auto;
            margin-top: 4.16666667%;
        }
        .app-box {
            width: 29.16666667%;
            background: url(../imgs/login_input.png) no-repeat;
            background-size: 100% 100%;
            margin: 0 auto;
            margin-top: 3.0625%;
            padding: 2.39583333% 0 2.5% 0;
            border-radius: 12px;
        }
        .app-input{
            width: 43.3928571%;
            height: 47px;
            margin: 0 auto;
            position: relative;
            margin-bottom: 35px;
        }
        .app-input input{
            width: 100%;
            height: 100%;
            outline: 0;
            border:1px solid #c3d4e3;
            border-radius: 9px;
            padding-left: 10px;
            font-size: 18px;
        }
        .app-input label{
            position: absolute;
            font-size: 22px;
            color: white;
            top: 7px;
        }
        .app-label1{
            left: -102px;
        }
        .app-label2{
            left: -74px;
        }
        .app-yanzheng{
            width: 66%!important;
        }
       
        .app-bottom{
          margin-bottom: 52px;
        }
        .app-login-btn{
            display: block;
            outline: 0;
            width: 53.0726257%;
            border: 3px solid #8ca5c3;
            background-color: #0052c3;
            height: 48px;
            margin: 0 auto;
            color: white;
            font-size: 22px;
            border-radius: 12px;
            cursor: pointer;
        }
        .app-login-btn:active{
            box-shadow: 2px 2px 2px #8ca5c3;
        }
        /* 添加媒体查询，适配小屏 */
        @media screen and (max-width: 1600px){
            .app-box{
                width: 25%;
            } 
            .app-input{
                height: 30px;
            }
            .app-input label{
                font-size: 16px;
                top: 5px;
            }
            .app-label1{
                left: -68px;
            }
            .app-label2{
                left: -47px;
            }
            .app-bottom{
              margin-bottom: 30px;
            }
           
            .app-login-btn{
                height: 40px;
                font-size: 16px;
            }
        }
    </style>
</head>

<body>
  <div id="app">
      <img class="app-title" src="../imgs/login_title.png">
      <div class="app-box">
          <div class="app-input">
              <input type="text">
              <label class="app-label1">用&nbsp;户&nbsp;名:</label>
          </div>
          <div class="app-input app-bottom">
              <input type="password">
              <label class="app-label2">密&nbsp;码:</label>
          </div>
          <button id="loginBtn" class="app-login-btn">登&nbsp;&nbsp;陆</button>
      </div>
  </div>
  <script src="../js/jquery/jquery.min.js"></script>
  <script>
    // 登陆按钮点击事件
    $('#loginBtn').on('click', function () {
      location.href = "../index.html"
    })
  </script>
</body>
</html>